<template>
  <div class="payment-page">
    <div class="card">
      <div class="card-header">
        <span>现场缴费</span><br>
        输入学号:
        <input
            v-model.number="stu_ID"
            id="stu_ID"
            type="number"
            placeholder="输入学号"

        /><br>
        <button @click="findAll">查询信息</button>
      </div>

      <div class="card-body">
        <div class="row">
          <div class="column">
            <div class="fee-card">
              <div class="fee-card-header">
                <span>学费</span>
              </div>
              <div class="fee-card-body">
                <p v-if="paymentData.tution_method === 0">当前费用: {{tuition}} 元</p>
                <button v-if="paymentData.tution_method === 0" @click="payTution">缴费</button>
                <p v-else>学费已缴费</p>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="fee-card">
              <div class="fee-card-header">
                <span>代收费</span>
              </div>
              <div class="fee-card-body">
                <p v-if="paymentData.agency_fee_method === 0">当前费用: {{agency_fee}} 元</p>
                <button v-if="paymentData.agency_fee_method === 0" @click="payAgency">缴费</button>
                <p v-else>代收费已缴费</p>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="fee-card">
              <div class="fee-card-header">
                <span>住宿费</span>
              </div>
              <div class="fee-card-body">
                <p v-if="paymentData.hotel_expense_method === 0">当前费用: {{hotel_expense}} 元</p>
                <button v-if="paymentData.hotel_expense_method === 0" @click="payHotel">缴费</button>
                <p v-else>住宿费已缴费</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Payment Page Styles */
.payment-page {
  padding: 20px;
  background-color: #f9f9f9;
}

.card {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 8px;
}

.card-header {
  background-color: #409eff;
  color: #fff;
  border-bottom: 1px solid #ddd;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-radius: 8px 8px 0 0;
}

.card-body {
  padding: 20px;
}

.error-message {
  color: red;
  font-weight: bold;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}

.column {
  flex: 1;
  min-width: 250px;
}

.fee-card {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  background-color: #f9f9f9;
}

.fee-card-header {
  font-size: 16px;
  margin-bottom: 10px;
  color: #409eff;
}

.fee-card-body p {
  margin: 10px 0;
  font-size: 14px;
}

button {
  padding: 10px 20px;
  background-color: #409eff;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #66b1ff;
}
</style>

<script>
import request from "@/utils/request";
import {Message} from "element-ui";

export default {
  name: 'PaymentPage',
  data() {
    return {
      //id
      stu_ID: 1,
      //学费
      tuition:10000,
      //代收费
      agency_fee :2000,
      //住宿费
      hotel_expense:3000,
      //绿色通道
      green_channel:1,
      tution_method:0,
      agency_fee_method:0,
      hotel_expense_method:0,
      //是否返校
      registeration:1,
      // 用于存储从后端获取的支付信息
      paymentData: {},
      errorMessage: '', // 错误信息
      error: '', // 确保定义 error 属性
    };
  },
  mounted() {

  },
  methods: {
    findAll() {
      //
      if (this.stu_ID === null || this.stu_ID <= 0) {
        this.errorMessage = '请输入有效的学号';
        this.paymentData = {}; // 清空之前的支付数据
        return;
      }
      //
      // this.errorMessage = ''; // 清空错误信息
      const findByIdRequest = {
        stu_ID: this.stu_ID
      }
      request.post("/regis/id", findByIdRequest)
          .then(res => {
            console.log(res.data);

            console.log(res.data);
            this.paymentData = res.data.data; // 从响应中获取 data 属性
            this.updateLocalData(); // 更新本地数据属性
            this.error = ''; // 清除错误信息
          })
          .catch(err => {

            this.error = '学号错误，请重新输入'; // 设置错误信息
            this.showError(this.error);
            this.paymentData = {}; // 清空 paymentData
            console.error("Network error:", err); // 处理网络错误
          });
    },
    updateLocalData() {
      // 从 paymentData 更新本地数据属性
      this.tuition = this.paymentData.tuition;
      this.agency_fee = this.paymentData.agency_fee;
      this.hotel_expense = this.paymentData.hotel_expense;
      this.green_channel = this.paymentData.green_channel;
      this.tution_method = this.paymentData.tution_method;
      this.agency_fee_method = this.paymentData.agency_fee_method;
      this.hotel_expense_method = this.paymentData.hotel_expense_method;
      this.registeration = this.paymentData.registeration;
    },
    payTution() {
      const cgtuition = {
        stu_ID: this.stu_ID,
        tution_method: this.tution_method
      }
      request.post("/regis/offline", cgtuition)
          .then(res => {
            console.log(res.data);
            Message.success({
              message: '缴费成功',
              duration: 3000
            });
          })
          .catch(err => {
            this.showError('操作失败，请稍后再试'); // 显示具体错误信息
            console.error("Network error:", err); // 处理网络错误
          });
      // 跳转到缴费成功页面
      this.$router.push('/paymentSuccess');
    },
    payAgency() {
      const cgagency = {
        stu_ID: this.stu_ID,
        agency_fee_method: this.agency_fee_method
      }
      request.post("/regis/offline", cgagency)
          .then(res => {
            console.log(res.data);
            Message.success({
              message: '缴费成功',
              duration: 3000
            });
          })
          .catch(err => {
            this.showError('操作失败，请稍后再试'); // 显示具体错误信息
            console.error("Network error:", err); // 处理网络错误
          });
      // 跳转到缴费成功页面
      this.$router.push('/paymentSuccess');
    },
    payHotel() {
      const cghotel = {
        stu_ID: this.stu_ID,
        hotel_expense_method: this.hotel_expense_method
      }
      request.post("/regis/offline", cghotel)
          .then(res => {
            console.log(res.data);
            Message.success({
              message: '缴费成功',
              duration: 3000
            });
          })
          .catch(err => {
            this.showError('操作失败，请稍后再试'); // 显示具体错误信息
            console.error("Network error:", err); // 处理网络错误
          });
      // 跳转到缴费成功页面
      this.$router.push('/paymentSuccess');
    },
    showError(str) {
      // 触发错误提示
      Message.error({
        message: str,
        duration: 3000 // 持续时间为3000毫秒（3秒）
      });
    },
  },



};
</script>
